<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>work_1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
		   body{padding-bottom: 4rem;}
		   dd{margin: 0;}
		   .mui-content-padded{margin-top: 1rem;}
		   .mui-bar-nav {
			    background-color: #71BB98;
			}
			.mui-bar-nav a{color:#fff;}
			.mui-title{color:#fff;font-size:1.2rem;}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			.fl{
				float: left!important;
			}
			.fr{
				float: right;
			}
			.chart_bot{
				background: #fff;
				padding:1rem;
				padding-top:0.5rem;
				padding-bottom:0.5rem;
				width:100%;
			}
			
			.chart_bot h2{
				font-size: 1.2rem;
				font-weight: 500;
				color:#F47D00;
				border-left:5px solid #5b72f4;
				padding-left: 0.5rem;
				line-height: 1.5rem;
			}
			
			.mui-media-body{line-height: 42px;}
			.mui-table-view{background: transparent;}
			.mui-table-view-cell{padding:0;margin:-10px 0;}
			.mui-table-view:before{height: 0;}
			.mui-table-view:after{height: 0;}
			.phot{height: 8rem;}
			.phot>div{width: 10rem;margin:0 auto;text-align: center; }
			.phot>div dl{float:left;width: 8rem;margin-left: 1.5rem;}
			.phot img{width: 100%;}
			.phot>img{display:block;width: 8rem;margin-left:14rem;}
			.phot p{float:left;width: 8rem;margin-left: 1rem;text-align: center;font-size: 1rem;}
			.orderto{text-align: center;margin-top: 2rem;}
			.orderto a{width: 15%;}
			.abnormal{height: 2rem;}
			.abnormal label{width: 20%;line-height: 1.5; font-size:1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; height: 1.5rem; text-align: right;}
			.abnormal input{width: 80%;font-size:1rem;height: 1.5rem;padding:0 15px; border:0;background: transparent;height: 1.5rem;margin-bottom: 0;}
			.abnormal textarea{width: 75%; font-size:1.2rem;background: transparent;height: 4rem;margin-bottom: 0;}
			.button{padding: 0 1rem;margin-top: 2rem;}
			.button a{width: 13%;}
			.pai{padding-bottom: 1rem;}
			.mui-bar-tab .mui-tab-item {
			    background: #71bb9a;
			    color: #fff;
			}
			.mui-bar-tab .mui-tab-item.mui-active {
			    color: red;
			}
			.table-bordered {
			    border: 1px solid #ddd;
			}
			.table {
			    width: 100%;
			    max-width: 100%;
			    margin-bottom: 20px;
			    background-color: transparent;
			    border-spacing: 0;
			    border-collapse: collapse;
			}
			.table td,.table th{
				font-size: 1rem;
				text-align: center;
			    padding:0.5rem 0;
			}
           .mui-input-row .mui-input-speech~.mui-icon-speech{right:20%;}
           #fault_swot{border:1px solid #ACACB4!important;font-size:1rem;width: 75%;height: 1.5rem;line-height: 1.5; padding:0 0.8rem;}
           .mui-icon-arrowdown{position: absolute;top:0.3rem;right:2rem;font-size:1.1rem;}
           .mui-input-row .mui-input-speech~.mui-icon-speech {
			    font-size: 1.1rem;
			    top: 0.1rem;
			}
			.mui-input-row .mui-input-clear~.mui-icon-clear{
				    font-size: 1.1rem;
			
				    top: 0.2 rem;
				    right: 7rem;
				    
			}
		</style>
		<script src="../js/mui.min.js"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">作业</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="fl chart_bot" style="background: transparent;border:2px dashed rgb(0,153,255);border-radius: 8px;">
					<h2 style="border-left: 0;">作业信息</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="abnormal">
						<label for="" class="fl">工单编号：</label>
						<input type="text" class="fl" id="order_num" readonly="readonly" value="SDJSL521489" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">任务编号：</label>
						<input type="text" class="fl" id="work_num" readonly="readonly" value="FRE-ONU-POI-14526" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">设备名称：</label>
						<input type="text" class="fl" id="order_name" readonly="readonly" value="电表" />
						<div class="mui-clearfix"></div>
					</div>
					
					<div class="abnormal">
						<label for="" class="fl">作&nbsp;业&nbsp;人：</label>
						<input type="text" class="fl" readonly="readonly" id="user" value=" 郭小四" />
						<div class="mui-clearfix"></div>
					</div>

				</div>
				<div class="mui-clearfix"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart_bot">
					<h2>异常信息</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="abnormal">
						<label for="" class="fl">异常时间：</label>
						<input type="text" class="fl" id="abnormal_time" readonly="readonly" value="2017-8-28" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">异常地点：</label>
						<input type="text" class="fl" id="abnormal_area" readonly="readonly" value="天辰路与舜华路交叉口路北" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal" style="position: relative;">
						<label for="" class="fl">故障类型：</label>
						<!--<input type="text" class="fl"  id="fault_swot" name="" value="" style="border:1px solid #C0C0C0;width: 75%;" />-->
						<select name="" id="fault_swot">
							<option value="">断电</option>
							<option value="">丢失</option>
							<option value="">高电压</option>
							<option value="">低电压</option>
						</select>
						<span class="mui-icon mui-icon-arrowdown"></span>
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal" style="height: 5rem;">
						<label for="" class="fl">故障分析：</label>
						<textarea name="" class="fl" rows="" cols=""></textarea>
						<div class="mui-clearfix"></div>
					</div>
					
				</div>
				
			</div>
			<div class="mui-content-padded">
				<div class="fl chart_bot">
					<h2>维修履历</h2>
					<hr style="margin-bottom: 1rem;" />
					<table border="1" class="table table-bordered" >
					    <thead>
					    	<tr>
								<th>序号</th>
								<th>维修内容</th>
								<th>维修时间</th>
							</tr>
					    </thead>
						<tbody id="ll">
							
						</tbody>
						
					</table>
					
				</div>
				<div class="mui-clearfix"></div>
			</div>
			<div class="mui-content-padded">
				<div class="fl chart_bot">
					<h2>本次操作记录</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="abnormal mui-input-row">
						<label for="" class="fl" style="line-height: 1;height: 1.5rem;">维修内容：</label>
						<input type="text" class="fl"  name="" id="repatr_content" value="断电" style="width: 75%;" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal mui-input-row">
						<label for="" class="fl" style="line-height: 1;height: 1.5rem;">维修结果：</label>
						<input type="text" id="repair_result" class="fl mui-input-speech mui-input-clear" style="border:1px solid #C0C0C0;width: 60%;padding-left: 0.5rem;" placeholder="语音输入">
						<div class="mui-clearfix"></div>
					</div>
					
				</div>
				<div class="mui-clearfix"></div>
			</div>
			<div class="mui-content-padded">
				<div class="fl chart_bot">
					<h2>上传照片</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="phot">
						<div>
							 <dl class="start" id="start">
							 	<dt><img src="../img/u192.png"/></dt>
							 	<dd>作业前</dd>
							 </dl>
							 <!--<dl class="middle" id="middle">
							 	<dt><img src="../img/u192.png"/></dt>
							 	<dd>作业中</dd>
							 </dl>
							 <dl class="end" id="end">
							 	<dt><img src="../img/u192.png"/></dt>
							 	<dd>作业后</dd>
							 </dl>-->
						</div>
						 
					</div>
					
				</div>
				<div class="mui-clearfix"></div>
			</div>
			
			<div class="button">
				<a href="javascript:void(0);" id="redeploy" class="fr mui-btn mui-btn-primary">退单</a>
				<a href="javascript:void(0);" id="send" class="fr mui-btn mui-btn-primary" style="margin-right: 0.5rem;">提交</a>
				<div class="mui-clearfix"></div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active" style="border-right: 2px solid #fff;" id="home">
	        <span class="mui-icon mui-icon-home"></span>
	        <!--<span class="mui-tab-label">首页</span>-->
	    </a>
	    <a class="mui-tab-item" href="" id="myinfo">
	        <span class="mui-icon mui-icon-person"></span>
	        <!--<span class="mui-tab-label">电话</span>-->
	    </a>
	</nav>
	<script type="text/javascript">
		//
		document.getElementById('myinfo').addEventListener('tap',function(){
			mui.openWindow({
					url:"per_information.html",
					id:"per_information",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
		//
		document.getElementById('home').addEventListener('tap',function(){
			mui.openWindow({
					url:"../main.html",
					id:"main",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
	</script>
	</body>
<script>
	(function($, doc) {
		$.init();
		 var user = JSON.parse(localStorage.getItem('$users')).account;
		 doc.getElementById('user').value=user;

//		var settings = app.getSettings();
      
		
		$.plusReady(function() {
		    var cw = plus.webview.currentWebview();
			var order_id=cw.order_id;
				$.ajax({
		            type: "POST",
				    url: __PATH__+"index/work_1",
				    async: true,
				    data:{
				    	username:user,
				    	order_id:order_id
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
				    	console.log(data);
					    doc.getElementById('order_num').value=data[0].orderNo;
					    doc.getElementById('work_num').value=data[0].work_num;
						doc.getElementById('order_name').value=data[0].resourceName;
						doc.getElementById('abnormal_time').value=data[0].createtime;
						doc.getElementById('abnormal_area').value=data[0].resourceLocation;
						mui.each(data[1],function(i,item){
							var html = '<tr><td>'+(i+1)+'</td><td>'+item.content+'</td><td>'+item.updatetime+'</td></tr>';
                            mui('#ll')[0].insertAdjacentHTML('beforeEnd', html);
						});
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});

			//照相入口
			var btn = document.getElementById('start');
				btn.addEventListener('tap',function(){
					var btnArray = [{title:"照相机"},{title:"相册"}]; //选择按钮  1 2 3
					plus.nativeUI.actionSheet({
					    title:"请选择",
					    cancel:"取消", // 0
					    buttons:btnArray
					    }, 
					    function(e){
					        var index = e.index; // 
					        switch (index){
					            case 1:
					                //写自己的逻辑
					             	cameraimages();
					            break;
					            case 2:
					            	galleryImgs();
					            break;
					        }
					});
					
				});
			//fasong
			var send = document.getElementById('send');
			send.addEventListener('tap',function(){
				var btnArray = ['否', '是'];
                mui.confirm('确认提交？？', '系统提示', btnArray, function(e) {
                    if (e.index == 1) {
                        imgupgrade(order_id);
                    }
                })
				
			});
			//退单
		    var redeploy = document.getElementById('redeploy');
			redeploy.addEventListener('tap',function(){
				var btnArray = ['否', '是'];
                mui.confirm('是否退单？', '系统提示', btnArray, function(e) {
                    if (e.index == 1) {
                        $.ajax({
				            type: "POST",
						    url: __PATH__+"index/working_out",
						    async: true,
						    data:{
						    	order_id:order_id
						    },
						    dataType: "json",
						    json: "jsoncallback",
						    timeout: 1000,
						    success: function(data) {
						    	console.log(data);
						    },
						    error:function(xhr,type,errorThrown){
								mui.alert(xhr,'提示') 				
							}
						});
                    } 
                })
				
				
			});
			//--
		});
		
		
		
		//上传单张图片
			function galleryImg() {
			    //每次拍摄或选择图片前清空数组对象
				f1.splice(0, f1.length);
				document.getElementsByClassName("showimg")[0].innerHTML = null;
				// 从相册中选择图片
				$.toast("从相册中选择一张图片");
				plus.gallery.pick(function(path) {
				    showImg(path);
				}, function(e) {
				    mui.toast("取消选择图片");
				}, {
				    filter: "image",
				    multiple: false
				});
			}
	
			function galleryImgs() {
			        //每次拍摄或选择图片前清空数组对象
			    f1.splice(0, f1.length);
			    document.getElementsByClassName("showimg")[0].innerHTML = null;
			    // 从相册中选择图片
			    $.toast("从相册中选择不超过两张图片");
			    plus.gallery.pick(function(e) {
			//                  if (e.files.length != 2) {
			//                      mui.toast('请选择身份证正面和背面照片共两张');
			//                      return false;
			//                  }
			        for (var i in e.files) {
			            showImg(e.files[i]);
			        }
			    }, function(e) {
			        $.toast("取消选择图片");
			    }, {
			        filter: "image",
			        multiple: true
			    });
			}
	        // 拍照添加文件
			function cameraimages() {
			        //每次拍摄或选择图片前清空数组对象
			    f1.splice(0, f1.length);
			    document.getElementsByClassName("showimg")[0].innerHTML = null;
			    var cmr = plus.camera.getCamera();
			    cmr.captureImage(function(p) {
			        plus.io.resolveLocalFileSystemURL(p, function(entry) {
			            var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
			            showImg(localurl);
			        });
			    }, function(e) {
			        $.toast("很抱歉，获取失败 "+ e);
			    });
			}
	            // 全局数组对象，添加文件,用于压缩上传使用
	        var f1 = new Array();
			function showImg(url) {
			    // 兼容以“file:”开头的情况
			    if (0 != url.toString().indexOf("file://")) {
			        url = "file://" + url;
			    }
			    var _div_ = document.getElementsByClassName("showimg")[0];
			    var _img_ = new Image();
			    _img_.src = url; // 传过来的图片路径在这里用。
			        _img_.onclick = function() {
			                plus.runtime.openFile(url);
			            };
			    _img_.onload = function() {
			        var tmph = _img_.height;
			        var tmpw = _img_.width;
			        var isHengTu = tmpw > tmph;
			        var max = Math.max(tmpw, tmph);
			        var min = Math.min(tmpw, tmph);
			        var bili = min / max;
			        if (max > 1200) {
			            max = 1200;
			            min = Math.floor(bili * max);
			        }
			        tmph = isHengTu ? min : max;
			        tmpw = isHengTu ? max : min;
			        _img_.style.border = "1px solid rgb(200,199,204)";
			        _img_.style.margin = "10px";
			        _img_.style.width = "100px";
			        _img_.style.height = "200px";
			        _img_.onload = null;
			        plus.io.resolveLocalFileSystemURL(url, function(entry) {
			                entry.file(function(file) {
			//                  console.log(file.size + '--' + file.name);
			                    canvasResize(file, {
			                        width: tmpw,
			                        height: tmph,
			                        crop: false,
			                        quality: 50, //压缩质量
			                        rotate: 0,
			                        callback: function(data, width, height) {
			                            f1 = data.substr(data.indexOf(',')+1);
			                            _img_.src = data;
			                            _div_.appendChild(_img_);
			                            plus.nativeUI.closeWaiting();
			//                          console.log(data);
			                        }
			                    });
			                });
			            },
			            function(e) {
			                plus.nativeUI.closeWaiting();
			                console.log(e.message);
			            });
			    };
			};
					//上传
	        function imgupgrade(order_id) {
	                var wt = plus.nativeUI.showWaiting();
	                var urls = 'http://www.sccham.com/upload_file.php';
	                var dataType = 'json';
	                //发送数据  
	                var data = {
	                	photo:f1	//base64
	                	
						}
					//成功响应的回调函数
			        var success = function(response) {
			        	var rrs = response;
			            plus.nativeUI.closeWaiting();
			            if (response) {
//	                        $.post("http://222.175.118.122:8099/perception.v2.1/index.php?m=Home&c=Repair&a=upload_db", 
//	                        {id:titleName,rrs:response}, function(data){
//	                          alert(data);
//		        		    }, 'json');
			                $.openWindow({
									url:"child_page.html",
									id:"child_page",
									style:{},
								    extras:{
									   	user:user,
									   	order_id:order_id
									   },
									show:{
										autoShow:true,
										aniShow:"slide-in-right",
										duration:100
									},
									waiting:{
										autoShow:false,
										title:"正在加载·····",
										options:{
							//				width:
							//				height:
										 }
									 }
								})
			            }else{
			            	alert("上传失败");
			            }
			        }
	                $.post(urls, data, success, dataType);
	           }
		//
		
	}(mui, document));
</script>
</html>